import { memo, useCallback, useState } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, PageHeader, Segmented } from 'antd';
import { Radio } from 'antd';
import EmailRegisterForm from '@/pages/Login/components/EmailRegisterForm';
import LoginForm from '@/pages/Login/components/LoginForm';
import PhoneLoginForm from '@/pages/Login/components/PhoneLoginForm';
import PhoneRegisterForm from '@/pages/Login/components/PhoneRegisterForm';
import ResetPasswordForm from '@/pages/Login/components/ResetPasswordForm';

enum formEnum {
  login,
  phoneLogin,
  phoneRegister,
  emailRegister,
  resetPassword,
}

const Login: FC<PropsWithChildren<{}>> = () => {
  const [index, setIndex] = useState(0);
  const navigate = useNavigate();

  const onBack = useCallback(() => {
    navigate(-1);
  }, []);

  return (
    <div className={'h-screen'}>
      <PageHeader
        onBack={onBack}
        title={
          <div
            onClick={onBack}
            className={'cursor-pointer hover:text-blue-400 '}
          >
            返回
          </div>
        }
      />
      <div
        // style={
        //   {height: 'calc(100vh - 72px)'}}
        className={'flex-justify-items-center flex-col'}
      >
        <div className={'mb-10 mt-24'}>
          <Segmented
            options={[
              { label: '账号登录', value: 0 },
              { label: '手机登录', value: 1 },
              { label: '手机注册', value: 2 },
              { label: '邮箱注册', value: 3 },
              { label: '重置密码', value: 4 },
            ]}
            onChange={(value) => {
              setIndex(value as number);
            }}
          />
        </div>
        <LoginForm show={index === 0} />
        <PhoneLoginForm show={index === 1} />
        <PhoneRegisterForm show={index === 2} />
        <EmailRegisterForm show={index === 3} />
        <ResetPasswordForm show={index === 4} />
      </div>
    </div>
  );
};

export default memo(Login);
